<template>
	<el-drawer v-model="visible" size="60%" title="司机拉运趟次详情">
		<BasicTableFrom :formList="formList" @search="onSearch" class="mb-2">
			<template #menu>
				<el-button @click="onExport" size="large" type="primary"
					>导出</el-button
				>
			</template>
		</BasicTableFrom>
		<BasicTable :data="tableData" :option="tableColumns">
			<template #menu="{ row }">
				<el-link type="primary" @click="onDetail(row)">详情</el-link>
			</template>
			<template #summary>
				<tr>
					<td colspan="9">合计</td>
					<td>{{ summaryRow.weight }}</td>
					<td></td>
					<td></td>
				</tr>
			</template>
		</BasicTable>
	</el-drawer>
</template>
<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import dayjs from 'dayjs';
import exportFile from '/@/utils/exportFile';

const visible = ref(false);
const searchForm = reactive({
	dateRange: undefined as [Date, Date] | undefined,
	vehicleNo: '',
});
const tableData = ref<any[]>([]);
const summaryRow = reactive<any>({ weight: 0 });

const formList = computed(
	() =>
		[
			{
				key: 'dateRange',
				type: 'daterange',
				label: '运单时段:',
				placeholder: '请选择时间段',
				clearable: true,
				valueFormate: 'YYYY-MM-DD',
			},
			{
				key: 'vehicleNo',
				type: 'input-text',
				label: '车牌号:',
				placeholder: '请输入车牌号',
				clearable: true,
			},
		] as BasicTableNameSpace.FormItemType[],
);

// BasicTable列配置
const tableColumns: any = {
	index: true,
	menuWidth: 80,
	column: [
		{ label: '日期', prop: 'date', width: 120 },
		{ label: '运单号', prop: 'orderNo', width: 160 },
		{ label: '车牌号', prop: 'vehicleNo', width: 120 },
		{ label: '司机', prop: 'driver', width: 100 },
		{ label: '始发地', prop: 'origin', width: 120 },
		{ label: '目的地', prop: 'destination', width: 120 },
		{ label: '客户', prop: 'customer', width: 120 },
		{ label: '货品名', prop: 'goods', width: 120 },
		{ label: '货量', prop: 'weight', width: 100 },
		{ label: '运单状态', prop: 'status', width: 100 },
	],
};

function open({ type = 'month', driver = '', vehicleNo = '' } = {}) {
	visible.value = true;
	console.log(driver);
	if (type === 'month') {
		// 本月1号到今天
		const start = dayjs().startOf('month').toDate();
		const end = dayjs().toDate();
		searchForm.dateRange = [start, end];
	} else {
		searchForm.dateRange = undefined;
	}
	searchForm.vehicleNo = vehicleNo;
	// TODO: emit 查询事件或请求数据
}
function onSearch(data?: any) {
	// TODO: emit 查询事件或请求数据
	// data为BasicTableFrom返回的表单数据
	console.log(data);
}
function onExport() {
	// 构造表头
	const titleArr = tableColumns.column.map((col: any) => col.label);
	// 构造数据
	const json = tableData.value.map((row) => {
		const obj: any = {};
		tableColumns.column.forEach((col: any) => {
			obj[col.label] = row[col.prop];
		});
		return obj;
	});
	exportFile({
		json,
		titleArr,
		sheetName: '拉运趟次',
		name: '拉运趟次导出',
	});
}
function onDetail(row: any) {
	// TODO: emit 详情事件
	console.log(row);
}
defineExpose({
	open,
});
</script>
<style scoped></style>
